<template>
    <div  class="playlist" >
            <p v-for="item in musicList" :key="item.id"  @click="$emit('play',item);jump(item)" :class="{select:item.id==redId }">

          {{item.name}} - {{item.artists[0].name}}
        </p>
    
      </div>
</template>
<script>
export default {
  name:'PlayList',
  props:['musicList','playMusice'],
  data(){
    return{
        redId:Number,
    }
  },
  methods:{
    jump(item){
      this.redId=item.id
    }
  }
}
</script>
<style lang="less" scoped>
.playlist{
  line-height: 2;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 83vh;
  background-color: #e9ebec;
    // overflow: hidden;
    overflow-y:scroll;
p{
  line-height: 3;
  padding: 10px;
     &.select{
    color: red;
  }
}
}
</style>